<template>
  <div id="app">
    <ul class="nav">
      <li><router-link to="/login">login</router-link></li>
      <li></li>
      <li><router-link to="/index">Home</router-link></li>
      <li>
        <router-link
          :to="{
            path: '/artclelist',
            query: { pageSize: 10, pageNum: 1, total: 100 }
          }"
          >文章列表</router-link
        >
      </li>
      <li>
        <router-link
          :to="{
            name: 'ArtclePage',
            params: { id: 100 }
          }"
          >文章详情页</router-link
        >
      </li>
      <li><router-link to="/req">axios请求</router-link></li>
    </ul>
    <router-view />
  </div>
</template>
<style lang="scss" scoped>
.nav {
  overflow: hidden;
  li {
    float: left;
    list-style: none;
    padding: 0 10px;
    border-right: 1px solid #ccc;
    a {
      text-decoration: none;
      color: #333;
      &.router-link-active {
        color: #42b983;
      }
      &.active {
        color: red;
      }
    }
  }
}
</style>
